<template>
<div>
     <fou-dialog :title="'支出'" v-model:dialogValue="dialogValue" :width="'75%'">
      <template #content="">
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="日期" prop="create_time"><el-input v-model="form.create_time" disabled  /></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="名稱" prop="name" >
                <el-select  v-model="form.name"  size="default" @change="change" value-key="name" >
                  <el-option v-for="item in payment_options"  :key="item.id" :label="item.name" :value="item" />
                </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
        </el-col>

         <el-col :span="8">
          <el-form-item label="數量" prop="num">
            <el-input type="number" v-model="form.num"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="金額" prop="money">
             <el-input type="number" v-model="form.money"   ></el-input>
          </el-form-item>
        </el-col>
                 <el-col :span="8">
          <el-form-item label="狀態" prop="status">
                <el-select  v-model="form.status"  size="default" >
                  <el-option v-for="item in status_options" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="備註" prop="remark">
             <el-input type="textarea" v-model="form.remark"   ></el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

           <div class="flex justify-end mt-10 w-[100%]" >
            <el-button @click="dialogValue = false">取消</el-button>
            <el-button type="primary" @click="confirm(ruleFormRef,buttonType)" color="#081F42">確定</el-button>
           </div>
      </template>
     </fou-dialog>
</div>
</template>

<script setup>
import { ref ,reactive,watch,onMounted} from 'vue' 
import { dayjs } from "element-plus";
import {expend,addExpense,updateExpense} from '@/http/index.js'
import {message} from '@/common/function.js'
import {elProps,status_options} from './index'
import { add, subtract, } from 'high-precision-four-fundamental-rules'

const dialogValue = ref(false)
const rules = reactive({
  name: [{ required: true, message: "請選擇支出名稱", trigger: ["blur",'change'] }],
  status: [{ required: true, message: "請選擇支出狀態", trigger: ["blur",'change'] }],
  num: [{ required: true, message: "請輸入支出數量", trigger: ["blur",'change'] }],
  money: [{ required: true, message: "請輸入支出價格", trigger: ["blur",'change'] }],
}); 
const form = reactive({
    create_time:dayjs().format('YYYY-MM-DD HH:mm:ss'),
    name:'',
    payment_id:'',
    status:'',
    num:'',
    money:'',
    remark:'',
});
const props = defineProps({
  echo:Object,
})
Object.assign(form,props.echo)
watch(()=>props.echo,(neaval)=>{
  Object.assign(form,neaval)
})



//支出項目
const payment_options = ref([])
const paymentData = async()=>{
    const data = await expend()
    if (data.code == 200) {
        payment_options.value = data.data.data
    }
}
const change = (e)=>{
form.name = e.name
form.payment_id = e.id
}
const ruleFormRef = ref('')
const emit = defineEmits(['update'])
const confirm = async (formEl,type) => {
  if (!formEl) return;
    formEl.validate(async (e)=>{
      if (e) {
        console.log(form);
        if (type == 'add') {
            const data = await addExpense(form)
            if (data.code == 200) {
              message('添加支出成功')
              emit('update')
            }
        }
        if (type == 'edit') {
            const data = await updateExpense(form)
              if (data.code == 200) {
              message('編輯支出成功')
              emit('update')
            }
        }
        dialogValue.value = false
      }
    })
};

const buttonType = ref('')
defineExpose({
    dialogValue,paymentData,buttonType
})
</script>

<style lang='less'  scoped>
.el-col{
  padding: 0 !important;
}
.product{
  .el-button{
    color: #fff;
  }
}
</style>